<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-02 12:00:26
 * @LastEditTime : 2021-09-08 16:30:30
 * @FilePath     : /newhope/src/page/clickSave/index.vue
 * @Description  : 点击保存
-->

<script setup lang="ts">
import clickSave from "/@/assets/images/clickSave.png";
import Message from "/@/assets/images/message.png";
import { onMounted } from 'vue'
const ua = window.navigator.userAgent.toLocaleLowerCase();
const isIOS = /iphone|ipad|ipod/.test(ua);
const isAndroid = /android/.test(ua);
import { useGo } from "/@/hooks/go";
import { ref } from "vue";
const [go] = useGo();
const text = ref("");
const isSave = ref(false)

function save() {
  if (!text.value) {
    alert("内容不能为空哦~");
    return;
  }
  // if (!isSave.value) {
  //   alert('请点击输入框的其他区域,让软键盘降下，分享的图片会更好看哦~')
  // }
  localStorage.setItem("content", text.value);
  window.scrollTo({
    left: 0,
    top: 0,
    behavior: 'smooth'
  })
  setTimeout(() => {
    go({ name: "gameIndex", query: { message: 1 } });
  }, 0)
}
function blur() {
  isSave.value = true
  document?.activeElement?.scrollIntoView(true)
  window.scrollTo({
    left: 0,
    top: 0,
    behavior: 'smooth'
  })
}
</script>
<template>
  <div class="clickSave">
    <div class="messageBox wobble-ver-left">
      <div class="box">
        <img :src="Message" alt="Message" class="messageImg" />
        <textarea @blur="blur" v-model="text" placeholder="请写下节日祝福..." />
      </div>
    </div>
    <img @click="save" :src="clickSave" alt="clickSave" class="clickSaveButton an" />
  </div>
</template>

<style lang="scss" scoped>
.wobble-ver-left {
  -webkit-animation: wobble-ver-left 0.8s both;
  animation: wobble-ver-left 0.8s both;
}
@-webkit-keyframes wobble-ver-left {
  0%,
  100% {
    -webkit-transform: translateX(-50%) translateY(0) rotate(0);
    transform: translateX(-50%) translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-50%) translateY(-30px) rotate(-6deg);
    transform: translateX(-50%) translateY(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(-50%) translateY(15px) rotate(6deg);
    transform: translateX(-50%) translateY(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-50%) translateY(-15px) rotate(-3.6deg);
    transform: translateX(-50%) translateY(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(-50%) translateY(9px) rotate(2.4deg);
    transform: translateX(-50%) translateY(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-50%) translateY(-6px) rotate(-1.2deg);
    transform: translateX(-50%) translateY(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble-ver-left {
  0%,
  100% {
    -webkit-transform: translateX(-50%) translateY(0) rotate(0);
    transform: translateX(-50%) translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-50%) translateY(-30px) rotate(-6deg);
    transform: translateX(-50%) translateY(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(-50%) translateY(15px) rotate(6deg);
    transform: translateX(-50%) translateY(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-50%) translateY(-15px) rotate(-3.6deg);
    transform: translateX(-50%) translateY(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(-50%) translateY(9px) rotate(2.4deg);
    transform: translateX(-50%) translateY(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-50%) translateY(-6px) rotate(-1.2deg);
    transform: translateX(-50%) translateY(-6px) rotate(-1.2deg);
  }
}

.an {
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
}
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: translateX(-50%) scale3d(1.25, 0.75, 1);
    transform: translateX(-50%) scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: translateX(-50%) scale3d(0.75, 1.25, 1);
    transform: translateX(-50%) scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: translateX(-50%) scale3d(1.15, 0.85, 1);
    transform: translateX(-50%) scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: translateX(-50%) scale3d(0.95, 1.05, 1);
    transform: translateX(-50%) scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: translateX(-50%) scale3d(1.05, 0.95, 1);
    transform: translateX(-50%) scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: translateX(-50%) scale3d(1.25, 0.75, 1);
    transform: translateX(-50%) scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: translateX(-50%) scale3d(0.75, 1.25, 1);
    transform: translateX(-50%) scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: translateX(-50%) scale3d(1.15, 0.85, 1);
    transform: translateX(-50%) scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: translateX(-50%) scale3d(0.95, 1.05, 1);
    transform: translateX(-50%) scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: translateX(-50%) scale3d(1.05, 0.95, 1);
    transform: translateX(-50%) scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1);
  }
}
.clickSave {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url("../../assets/images/gameDescriptionBkg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .messageBox {
    position: absolute;
    top: 209px;
    left: 50%;
    transform: translateX(-50%);
    width: 311px;
    height: 181px;
    .box {
      position: relative;
      height: 100%;
      width: 100%;
      .messageImg {
        height: 100%;
        width: 100%;
      }
      textarea {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        height: 85%;
        width: 90%;
        outline: none;
        border: none;
        background: transparent;
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        // line-height: 34px;
        letter-spacing: 2px;
        color: #bd010c;
        // text-align: center;
      }
    }
  }
  .clickSaveButton {
    position: absolute;
    top: 423px;
    left: 50%;
    transform: translateX(-50%);
    width: 125px;
    height: 42px;
  }
}
</style>
